<template>
  <div>
    <!-- 面包屑导航区域 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">
        当前位置：
      </el-breadcrumb-item>
      <el-breadcrumb-item>项目管理</el-breadcrumb-item>
      <el-breadcrumb-item>礼包管理</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 步骤条 -->
    <el-steps :active="0" finish-status="success" align-center>
      <el-step title="填写礼包信息"></el-step>
      <el-step title="配置礼包规则"></el-step>
    </el-steps>

    <!-- 卡片视图区域 -->
    <el-card>  
      <div slot="header">
        <span>基本信息</span>
      </div> 
      <div>
          <GiftBasicInfo 
            ref="giftInfoFormRef"
            @getGiftInfo="getGiftInfoData"
          ></GiftBasicInfo><!--:giftInfoForm="giftInfoForm"-->
      </div>
    </el-card>

    <el-row>  
      <el-button @click="addGift('addGift')">
        保存礼包信息
      </el-button>
      <el-button class="theme-background-color" @click="addGift('andRule')">  <!-- 先提交保存，再跳转至添加礼包规则的页面 -->
        保存，并添加规则
      </el-button>
    </el-row>

  </div>
</template>

<script>

import GiftBasicInfo from './GiftBasicInfo.vue'

export default {
  components: { GiftBasicInfo },
  data() {
    return { 
      giftInfoData: {}    // 提交的礼包基本信息 
    }
  },
  created() { 
  },
 
  methods: {
   
    getGiftInfoData(data){
      this.giftInfoData = JSON.parse(JSON.stringify(data))  
    },

    // 添加礼包：
    async addGift(btn) {
      const flag = this.$refs.giftInfoFormRef.validateForm()
      if (!flag) return

      this.$refs.giftInfoFormRef.getFinalData()
 
      const postData = Object.assign(
        this.giftInfoData
      )
      const { data: res } = await this.$http.post('/admin/gift/add', postData)
      if (res.meta.status !== 200) {
        return this.$message.error(res.meta.msg)
      }
        
      this.$message.success('新增礼包成功')
      if (btn == 'addGift') {
        this.$router.push('/gift/GiftManage')
      } else if (btn == 'andRule') {
        this.$router.push({
          path: '/gift/AddGiftRule',
          query: { gname: res.data.name, gid: res.data.id,gtype:JSON.stringify(res.data.type) }
        })
      }
    }

  }
}
</script>

<style lang="less" scoped>
.el-card {
  margin-bottom: 10px;
}
/deep/.noBorder .el-input__inner {
  border: none;
}
</style>
